<template>
	<div class="all" @dblclick="switchShow" @click="chooseLine">
		<div class="writing">
			<el-input
				v-show="editable"
				type="textarea"
				class="textstyle"
				:style="{'font-size': fontsize+'px', 'color': color}"
				:autosize="{ minRows: 1}"
				:placeholder="id_"
				v-model="text_area"
				resize="none"
				@change="updatetext()"
			>
			</el-input>
			<div v-show="!editable" class="textstyle" :style="{'font-size': fontsize+'px', 'color': color}">
				<div class="mark_to_html" ref="mark_to_html"></div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { marked } from 'marked';
import { ref, watchEffect } from 'vue';

const props = defineProps({
	id: {
		type: String,
		default: 0
	},
	textarea: {
		type: String,
		default: ''
	},
	fontsize: {
		type: Number,
		default: 20
	},
	color: {
		type: String,
		default: '#000'
	}
})

// 数据集合
const id_ = ref(0)
const text_area = ref('')
const editable = ref(true)

// 根据props变化侦听text_area和id_的值
watchEffect(async () => {
	id_.value = props.id
	text_area.value = props.textarea
})


// 将text内容和id发送出去
const emits = defineEmits(['updateText', 'chooseLine'])
// 更新文本时，发送内容出去
const	updatetext = () => {
	emits('updateText', text_area.value)
}
// 选择行，并将该行id发送
const	chooseLine = () => {
	emits('chooseLine', id_.value)
}

// 获取dom，使其显示html
const mark_to_html = ref()
const	update_md_text = () => {
	let text = marked.parse(text_area.value)
	mark_to_html.value.innerHTML = text
}
// 切换显示/编辑状态
const	switchShow = () => {
	editable.value = !editable.value
	// 若为显示状态则根据text_area更新html
	if (!editable.value) {
		update_md_text()
	}
}

const switchShowTo = (isShow) => {
	if (isShow) {
		editable.value = false
		update_md_text()
	} else {
		editable.value = true
	}
}

// 暴露l切换ine显示/编辑状态的 方法
defineExpose({switchShowTo})
</script>

<style scoped>
.all {
	height: auto;
	min-height: 40px;
	width: 100%;
}
.all:hover {
	cursor: pointer;
}
.writing {
	height: calc(100% - 10px);
	width: 100%;
	margin-bottom: 10px;
}
.textstyle {
	font-size: 20px;
	line-height: 40px;
}
.mark_to_html {
	border-radius: 5px;
	box-sizing: border-box;
}
</style>

<style>
.el-textarea__inner::-webkit-scrollbar {
	width: 0 !important;
}
</style>